<template>
    <view class="container">

        <!-- 空状态 -->
        <view class="empty-state" v-if="!historyList.length">
            <text class="empty-text">暂无文章记录</text>
        </view>

        <!-- 历史记录列表 -->
        <view class="history-list" v-else>
            <view class="history-card" v-for="item in historyList" :key="item.id" @click="handleCardClick(item)">
                <view class="card-header">
                    <image class="article-image" :src="item.coverImage" mode="aspectFill"></image>
                    <view class="header-right">
                        <text class="title">{{ item.title }}</text>
                        <text class="time">{{ dateTimeFormat(item.createTime) }}</text>
                    </view>
                </view>

                <view class="divider"></view>

                <view class="card-content">
                    <text class="description">{{ formatDescription(item.description) }}</text>
                </view>

                <view class="card-footer">
                    <view class="stats">
                        <view class="stat-item">
                            <uni-icons type="eye" size="14" color="#999"></uni-icons>
                            <text>{{ item.viewCount || 0 }}</text>
                        </view>
                        <view class="stat-item">
                            <uni-icons type="heart" size="14" color="#999"></uni-icons>
                            <text>{{ item.likeCount || 0 }}</text>
                        </view>
                        <view class="stat-item">
                            <uni-icons type="chat" size="14" color="#999"></uni-icons>
                            <text>{{ item.commentCount || 0 }}</text>
                        </view>
                    </view>
                    <text class="view-detail">查看详情 ></text>
                </view>
            </view>
        </view>

    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { dateTimeFormat } from '@/utils/system'

const historyList = ref([])

// 获取历史记录
const getHistoryList = async () => {
	uni.showLoading({
		title:"加载中"
	})
    try {
        const res = await request.get('/article/my-love')
        historyList.value = res.data || []
		uni.hideLoading()
    } catch (err) {
		uni.hideLoading()
        uni.showToast({
            title: err || '获取记录失败',
            icon: 'none'
        })
    }
}

// 点击卡片
const handleCardClick = (item) => {
    uni.navigateTo({
        url: `/pages/article/detail?id=${item.id}`
    })
}

// 处理描述文本截断
const formatDescription = (text) => {
    if (text && text.length > 50) {
        return text.slice(0, 50) + '...'
    }
    return text
}

onMounted(() => {
    getHistoryList()
})
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #f5f5f5;
    padding: 0;
}

.nav-placeholder {
    height: 88rpx;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40vh;

    .empty-text {
        font-size: 28rpx;
        color: #999;
    }
}

.history-list {
    padding: 20rpx;

    .history-card {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            :deep(uni-checkbox) {
                margin-right: 20rpx;
            }

            .article-image {
                width: 160rpx;
                height: 120rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .header-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 120rpx;

                .title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }

                .time {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }

        .divider {
            height: 2rpx;
            background-color: #f5f5f5;
            margin: 20rpx 0;
        }

        .card-content {
            .description {
                font-size: 28rpx;
                color: #666;
                line-height: 1.5;
            }
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .stats {
                display: flex;
                gap: 30rpx;

                .stat-item {
                    display: flex;
                    align-items: center;
                    gap: 4rpx;
                    color: #999;
                    font-size: 24rpx;
                }
            }

            .view-detail {
                font-size: 24rpx;
                color: #2196F3;
            }
        }
    }
}
</style>